<template>
    <el-row>
        <el-col>
            <el-tree class="eltree" v-loading="loading" element-loading-spinner="el-icon-loading" :data="data"
                default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"
                @node-click="nodeclick">
            </el-tree>

            <div class="permissionEditDiv" v-show="editshow">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="权限名称">
                        <el-input v-model="form.name" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="编码">
                        <el-input v-model="form.element" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="form.type" placeholder="选择类型" class="elinput" @change="typechange">
                            <el-option label="菜单" value="1"></el-option>
                            <el-option label="功能" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.ordernum" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="启用状态">
                        <el-input v-model="form.status" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.rmk" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路径">
                        <el-input v-model="form.path" class="elinput"></el-input>
                    </el-form-item>
                    <el-form-item label="图标路径">
                        <el-input v-model="form.icon" class="elinput"></el-input>
                        <div style="display: flex;">
                            <el-image :src="form.icon" style="width: 40px;height: 40px;padding: 10px;"></el-image>
                            <el-upload class="upload-demo" :action="uploadfileurl" multiple :show-file-list="false"
                                :on-progress="progress" :on-success="success" :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                            <el-progress v-if="showProgress" :percentage="progInt" style="width: 12.5rem;">
                            </el-progress>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="父级">
					  	<el-input v-model="form.pidname" class="elinput"></el-input>
					  </el-form-item> -->
                    <el-form-item>
                        <el-button type="danger" @click="del">删除</el-button>
                        <el-button type="success" @click="create">创建新</el-button>
                        <el-button type="success" @click="add">添加为子节点</el-button>
                        <el-button type="primary" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    // import $ from '@/api/api';
    export default {
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                loading: true,
                form: {
                    id: '',
                    name: '',
                    element: '',
                    status: '',
                    rmk: '',
                    path: '',
                    icon: '',
                    type: '',
                    ordernum: '',
                    pidname: '',
                    pid: ''
                },
                editshow: false,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                showProgress: false,
                progInt: 0,
                fileList: [],
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.$ajax.post('/sysuser/permissions').then(resp => {
                    // //console.log(resp)
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        // console.log(resp)
                        this.data = resp.menulist;
                        this.loading = false;
                    }
                })
            },
            typechange(val) {
                this.form.type = val;
            },
            nodeclick(data, node, obj) {
                this.form.id = data.id;
                this.form.name = data.permissionsName;
                this.form.element = data.element;
                this.form.status = data.status;
                this.form.rmk = data.rmk;
                this.form.path = data.path;
                this.form.icon = data.icon;
                this.form.type = data.type;
                this.form.ordernum = data.ordernum;
                this.form.pid = data.id;
                // if(obj.$parent.node!=undefined){
                // 	this.form.pidname=obj.$parent.node.data.permissionsName;
                // 	this.form.pid=obj.$parent.node.data.id;
                // }else{
                // 	this.form.pidname='0';
                // 	this.form.pid='0';
                // }
                this.editshow = true;
            },
            save() {
                var param = {
                    id: this.form.id,
                    permissionsName: this.form.name,
                    element: this.form.element,
                    status: this.form.status,
                    rmk: this.form.rmk,
                    path: this.form.path,
                    icon: this.form.icon,
                    type: this.form.type,
                    ordernum: this.form.ordernum
                };
                this.$ajax.post('/sysuser/savePermission', param).then(resp => {
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            message: '已保存'
                        });
                        this.init();
                    }
                })
            },
            del() {
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/sysuser/del', {
                        id: this.form.id
                    }).then(resp => {
                        if (resp.code != 0) {
                            this.$message.error(resp.msg);
                        } else {
                            this.$message({
                                type: 'success',
                                message: '已删除'
                            });
                            this.init();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            create() {
                var param = {
                    permissionsName: this.form.name,
                    element: this.form.element,
                    status: this.form.status,
                    rmk: this.form.rmk,
                    path: this.form.path,
                    icon: this.form.icon,
                    type: this.form.type,
                    ordernum: this.form.ordernum,
                    pid: '0'
                };
                this.$ajax.post('/sysuser/create', param).then(resp => {
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            message: '创建成功'
                        });
                        this.init();
                    }
                })
            },
            add() {
                var param = {
                    permissionsName: this.form.name,
                    element: this.form.element,
                    status: this.form.status,
                    rmk: this.form.rmk,
                    path: this.form.path,
                    icon: this.form.icon,
                    type: this.form.type,
                    ordernum: this.form.ordernum,
                    pid: this.form.pid
                };
                this.$ajax.post('/sysuser/create', param).then(resp => {
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            message: '已添加'
                        });
                        this.init();
                    }
                })
            },
            progress(event) {
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                this.showProgress = false;
                this.form.icon = response.body.data.url;
            },
            beforeUpload(file) {
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 200) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过200M`)
                    return false
                }
            },

        }
    };
</script>

<style>
    .elinput {
        width: 400px;
    }

    .permissionEditDiv {
        padding: 100px 100px 50px 100px;
        position: absolute;
        margin: 20px 0 0 40px;
        left: 550px;
        top: 100px;
        width: 600px;
        height: 700px;
        background-color: rgba(171, 220, 229, 0.3);
        color: #0c8484;
    }

    .eltree {
        padding: 50px 0 50px 50px;
        position: absolute;
        width: 500px;
        margin: 20px 0 0 40px;
        background-color: rgba(188, 203, 218, 0.8);
        color: #0c8484;
    }

    .sh {
        margin: 15px 0 15px 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .shpro {
        float: left;
        margin: 0 10px 0 0;
    }

    .gongneng {
        width: 100px;
        float: right;
        margin: 15px 100px 15px 0;
    }

    .el-tree-node.is-current>.el-tree-node__content {
        background-color: #899199 !important;
        width: 85%;
        color: white;
    }

    .el-tree-node__content:hover {
        background-color: #aeb8c2 !important;
        width: 85%;

    }
</style>
